<template>
  <div>
    <div class="container">
      <Nav></Nav>
      <div class="main">
        <div class="carousel">
          <el-carousel :interval="3000" type="card" height="300px">
            <el-carousel-item>
              <div style="height:400px">
                <img
                  src="https://img0.baidu.com/it/u=3972827057,4174765381&fm=26&fmt=auto"
                  alt=""
                />
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div style="height:400px">
                <img
                  src="https://img0.baidu.com/it/u=2064642481,3025974924&fm=26&fmt=auto"
                  alt=""
                />
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div style="height:400px">
                <img
                  src="https://img0.baidu.com/it/u=2959662161,3744175210&fm=26&fmt=auto"
                  alt=""
                />
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div style="height:400px">
                <img
                  src="https://img1.baidu.com/it/u=2987868719,494987900&fm=26&fmt=auto"
                  alt=""
                />
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div style="height:400px">
                <img
                  src="https://img0.baidu.com/it/u=3972827057,4174765381&fm=26&fmt=auto"
                  alt=""
                />
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div style="height:400px">
                <img
                  src="https://img0.baidu.com/it/u=2064642481,3025974924&fm=26&fmt=auto"
                  alt=""
                />
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div style="height:400px">
                <img
                  src="https://img0.baidu.com/it/u=2959662161,3744175210&fm=26&fmt=auto"
                  alt=""
                />
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div style="height:400px">
                <img
                  src="https://img1.baidu.com/it/u=2987868719,494987900&fm=26&fmt=auto"
                  alt=""
                />
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div>
          <div class="card">
            <div class="title">热门菜系</div>
            <div class="hotList">
              <div class="word hot">早餐</div>
              <div class="word hot">中餐</div>
              <div class="word hot">晚餐</div>
              <div
                class="word"
                v-for="item in cuisineList"
                :key="item.id"
                v-text="item.name"
              ></div>
            </div>
          </div>
          <!-- 这个 div 是新添加的 -->
          <div class="nav_wrap2">
            <ul>
              <li>
                <el-button
                  type="primary"
                  v-on:click="listmaster(1, masterList.size, 1)"
                  >全部师傅</el-button
                >
              </li>
              <li>
                <el-button
                  type="primary"
                  v-on:click="listmaster(1, masterList.size, 2)"
                  >按评分排序</el-button
                >
              </li>
              <li>
                <el-button
                  type="primary"
                  v-on:click="listmaster(1, masterList.size, 3)"
                  >空闲师傅</el-button
                >
              </li>
            </ul>
          </div>
          <div class="item" style="display: block;">
            <ul>
              <li v-for="item in masterList.records" :key="item.id">
                <a href="javascrip:;">
                  <i
                    ><img
                      v-bind:src="item.headPhoto"
                      src="https://i3.meishichina.com/attachment/recipe/2021/11/25/2021112516378127319541958079.jpg?x-oss-process=style/c320"
                      alt=""
                  /></i>
                  <p>{{ item.name }}</p>
                  <p>评分：{{ item.score }}</p>

                  <p>
                    <el-button type="primary" v-on:click="goMasterDetail(item)"
                      >预约师傅</el-button
                    >
                  </p>
                </a>
              </li>
            </ul>
          </div>
          <div class="pagination">
            <el-button
              type="primary"
              v-on:click="prevPage(masterList.current)"
              v-if="masterList.current > 1"
              >上一页</el-button
            >
            <el-button
              type="primary"
              v-on:click="nextPage(masterList.current)"
              v-if="dataType == 1"
              >下一页</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "@/components/nav";
import { list_master } from "../../api/mdy/index";

import { list_cuisine } from "../../api/mdy/index";
export default {
  components: {
    Nav
  },
  data() {
    return {
      dataType: 1,
      threeMeal: [], //今日三餐
      freshRecMeal: [], //新鲜推荐
      currentPage: 1, //当前页
      pageSize: 3, //分页的每页显示多少个
      total: 0, //总条数
      totalPages: 0,
      masterList: [], //师傅列表
      cuisineList: [] //菜系列表
    };
  },
  mounted() {
    this.listmaster(this.currentPage, this.pageSize, this.dataType);
    this.listcuisine();
  },
  created() {},
  methods: {
    //==================分页==================
    //上一页
    prevPage(currentPage) {
      this.listmaster(currentPage - 1, this.pageSize, this.dataType);
    },

    //下一页
    nextPage(currentPage) {
      this.listmaster(currentPage + 1, this.pageSize, this.dataType);
    },

    //==================数据请求==================
    //获取所有的菜系
    listcuisine() {
      list_cuisine()
        .then(res => {
          console.info(res);
          this.cuisineList = res;
          console.info("响应成功！");
        })
        .catch(err => {
          console.info("响应失败！");
        });
    },

    //或取所有的师傅列表
    listmaster(currentPage, pageSize, type) {
      this.dataType = type;

      list_master(currentPage, pageSize, type)
        .then(res => {
          console.info("list_master响应成功");
          this.masterList = res.map.list;
        })
        .catch(err => {
          console.info("list_master响应失败");
        });
    },

    getMenu(type) {
      this.$http
        .post("/healthy/public/api/menu/GetMenu", {
          type
        })
        .then(res => {
          let resData = res.data;
          if (resData.code == 1) {
            this.$message({
              message: resData.msg,
              type: "success"
            });
            if (type == "2") {
              this.threeMeal = resData.data;
            }
            if (type == "3") {
              this.freshRecMeal = resData.data;
            }
          } else {
            this.$message.error(resData.msg);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error("网络异常");
        });
    },

    //==================路由跳转==================

    goMenudetail(menu) {
      this.$router.push({ path: "/menuDetail", query: { id: menu.id } });
    },

    goMasterDetail(master) {
      console.info("goMasterDetail: " + master);
      this.$router.push({
        path: "/masterDetail",
        query: {
          master: master
        }
      });
    }
  }
};
</script>

<style>
ol,
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
.container {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f1f1f1;
  overflow: auto;
}
.carousel {
  background-color: #fff;
  border-radius: 12px;
  margin-top: 10px;
}
.main {
  margin: 0 auto;
  width: 1200px;
  box-sizing: border-box;
}
.body {
  padding: 0 400px;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  /* justify-content: space-between; */
}
.card {
  width: 1200px;
  border-radius: 12px;
  background: #fff;
  /* height: 192px; */
  padding: 20px;
  margin-top: 10px;
  box-sizing: border-box;
}
.title {
  height: 32px;
  padding: 20px 0px 20px 20px;
  font-size: 24px;
  color: #222;
  font-weight: 600;
  line-height: 32px;
  position: relative;
  text-align: left;
}
.hotList {
  padding: 0px 24px;
  font-size: 0px;
  /* height: 110px;  */
  display: flex;
  flex-wrap: wrap;
}
.hotList .word {
  display: inline-block;
  vertical-align: Top;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  color: #222;
  font-weight: 400;
  padding: 0px 16px;
  margin: 10px;
  border-radius: 20px;
  background: #f5f5f5;
}
.hotList .hot {
  background: rgba(246, 77, 54, 0.15);
  color: #f64d36;
}
.sancan_tab {
  height: 32px;
  display: inline-block;
  vertical-align: top;
  padding-left: 20px;
  font-size: 0px;
}
.sancan_tab li {
  display: inline-block;
  vertical-align: top;
  line-height: 32px;
  height: 32px;
  padding: 0px 15px;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  border-radius: 16px;
  background: #eee;
  color: #999;
  margin-right: 15px;
  cursor: pointer;
}
.sancan_tab li.current {
  background: #f64d36;
  background-image: -webkit-linear-gradient(to right, #f67536, #f64d36);
  background-image: linear-gradient(to right, #f67536, #f64d36);
  color: #fff;
}
.sancan_item {
  width: 240px;
  margin: 0px 20px 0px 0px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  top: 0px;
  transition: all ease 0.3s;
}
.sancan_item .imgw {
  height: 240px;
  width: 240px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.cardtitle {
  font-size: 18px;
  color: #222;
  line-height: 30px;
  padding-top: 10px;
  text-align: left;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sancan_item .des {
  font-size: 14px;
  color: #999;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cardbody {
  display: flex;
  justify-content: space-around;
  /* overflow-x: auto; */
}
.freshMenu {
  padding: 10px;
}
.freshMenuTitle {
  text-align: left;
  height: 32px;
  padding: 20px 0px 20px 0px;
  font-size: 24px;
  color: #222;
  font-weight: 600;
  line-height: 32px;
}
.list_s1_item {
  width: 224px;
  height: 360px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  /* margin: 0px 20px 20px 0px; */
  display: inline-block;
  vertical-align: top;
  box-shadow: 0px 4px 12px rgb(0 0 0 / 0%);
  transition: all ease 0.3s;
}
.list_s1_item .imgw {
  position: relative;
  height: 280px;
  overflow: hidden;
}
.list_s1_item_info {
  text-align: left;
}
.list_s1_item_info_title {
  font-size: 16px;
  color: #222;
  font-weight: 600;
  line-height: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin: 12px 20px 0px;
}
.list_s1_item_info_sc {
  font-size: 14px;
  color: #999;
  font-weight: 400;
  line-height: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin: 0px 20px 0px;
  padding-left: 24px;
  position: relative;
}
.freshMenuBody {
  display: flex;
  justify-content: space-around;
  /* overflow-x: auto; */
}

/* 这里开始新加的 */
.nav_wrap2 {
  height: 34px;
  border-bottom: 1px solid #ff6767;
  border-top: 1px solid #ff6767;
  margin: auto;
  width: 990px;
}

.nav_wrap2 ul {
  overflow: hidden;
}

.nav_wrap2 ul li {
  float: left;
  padding: 0 10px;
  height: 100px;
}

.nav_wrap2 ul li a {
  display: block;
  padding: 0 3px;
  height: 34px;
  font-size: 14px;
  line-height: 34px;
  color: #333;
}

.nav_wrap2 ul li a:hover {
  color: #ff6767;
}

.nav_wrap2 ul li a.active {
  color: #ff6767;
}

.nav_wrap2 ul .right {
  float: right;
  position: relative;
  padding: 0 10px;
}
.item ul {
  width: 1040px;
  overflow: hidden;
}
.item ul li {
  float: left;
  margin: 0 23px 0 0;
  text-align: center;
  width: 230px;
  height: 400px;
  overflow: hidden;
}
.item ul li a {
  display: block;
  overflow: hidden;
  position: relative;
  color: #333;
}
.item ul li a i {
  display: block;
  overflow: hidden;
  width: 230px;
  height: 230px;
}
.item ul li a i img {
  width: 230px;
  height: 230px;
  transition: transform 0.5s ease-in-out;
}
img {
  display: block;
}
.item ul li a p {
  font-size: 18px;
  line-height: 120%;
  padding: 8px 0 2px;
}
</style>
